<template>
	<div>
		<van-index-bar>
			<div v-for="key in words" :key="key.info.pinyin">
				<van-index-anchor :index="key.info.pinyin" />
				<van-cell
					:title="item.info.brand_name"
					v-for="(item) in carList.filter(v => v.info.pinyin === key.info.pinyin)"
					:key="item.info.brand_id"
					:icon="item.info.image_url"
					@click="$router.push('/select/car/' + item.info.brand_id)"
				/>
			</div>
		</van-index-bar>
	</div>
</template>


<script lang="ts">
import { defineComponent } from 'vue'
import { onMounted, ref } from 'vue';
import { fetchSelectCarList } from '@/api'

interface WordsType {
	type: '1000',
	info: {
		pinyin: 'string'
	}
}

interface CarItemType {
	type: '1001',
	info: {
		brand_id: number
		brand_name: string
		dealer_tag: number
		image_url: string
		pinyin: string
		series_count: number
	}
}
export default defineComponent({
	name: 'selectCar',
	created() {
		console.log('111111111111');
	},
	setup() {
		const data = ref<any[]>([])
		const words = ref<WordsType[]>([])
		const carList = ref<CarItemType[]>([])


		const getList = async () => {
			const resp = await fetchSelectCarList()
			data.value = resp.data.data
			words.value = data.value.filter(v => v.type === '1000')
			carList.value = data.value.filter(v => v.type === '1001')
		}

		onMounted(() => {
			getList()
		})

		return {
			data,
			words,
			carList,
			getList
		}
	}
})


</script>